Tower

De basiscontainer voor het tower-pattern patroon. Je kan bijvoorbeeld aan het body element de CSS klasse tower toekennen.

Probleem

Alle content moet als één blok gemanipuleerd kunnen worden in css. Die blok moet responsief zijn. Het lijkt ons zinvol om een minimum hoogte en breedte vast te leggen. Het tower element komt vooral van pas wanneer je een single page webapp wilt maken. Voor ASP.NET MVC is dat niet nodig omdat deze werkt met een masterpage. Een voorbeeld hiervan vind je op Fric-frac master page.

Design

Een element met een tower class is de basiscontainer. Het tower element vult steeds het browservenster.

Daarvoor worden de attributen width en height op 100% gezet.
Hoogte en breedte worden uitgedrukt in percenten. Alle boven liggende elementen moeten dus ook een hoogte en breedte hebben uitgedrukt in percenten.
Bij het berekenen van hoogte en breedte wordt geen rekening gehouden met de padding en de margin. We gebruiken voor het meten het border-box model.
De minimum hoogte en breedte drukken we uit in em omdat we daarmee aangeven hoeveel regels en karakters er minimum zichtbaar blijven.
We zetten margin en padding van alle elementen op nul en selecteren het box-border model. De tower div zit in het body element dus moet de breedte en de hoogte van dat element en het html element erboven in percenten worden uitgedrukt zodat de instellingen van tower div correct werken.
We gebruiken geen logo zoals op de meeste hotelwebsites waar het logo links- of rechtsboven staat. In plaats daarvan zetten we een watermerk op de pagina's. Daarom moet de achtergrond van de tower gedeeltelijk doorzichtig zijn.
De height wordt bepaald door de inhoud. Die leggen we niet van te voren vast. De width staat op 100% van het moederelement.

Oplossing

We gaan ervan uit dat het body element van de klasse tower is.

Vincent: Ik orden mijn CSS selectors in hetzelfde bestand liefst volgens specificiteit.

/*
    bestandsnaam app.css
*/
.tower {
    font-family: Verdana, sans-serif;
    width: 100%;
    background-color: rgba(249, 246, 244, 0.9);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Vergeet niet dat de hoogte en de breedte van alle bovenliggende elementen ook in percenten moeten worden opgegeven.

html {
    width: 100%;
}

Gebruik

We gebruiken de tower-pattern HTML Fric-frac Eventkalender als basis. Alle css zetten we in een bestand met de naam css/app.css.
1. ASP.NET MVC Core plaatsen we de link naar het CSS bestand in de masterpage (_Layout.cshtml of MasterLayout.css). Let op de tilde die aan de naam van het css bestand vooraf gaat:
```
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link type="text/css" rel="stylesheet" href="~/css/app.css">
</head>
```
2. In PHP of HTML voegen we gewoon een link toe in het index.php of index.html bestand:
```
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <link type="text/css" rel="stylesheet" href="css/app.css">
```
En dat is het resultaat. Alleen de opmaak van de tower klasse is toegepast. Dat maakt geen verschil met de HTML zonder opmaak. De Admin/Index pagina ziet er krak hetzelfde uit:
$Fric-frac Admin-Index zonder CSS$
Fric-frac Admin-Index zonder CSS

2018-01-14 13:01:22